<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Storyboard Builder &copy;Eugene Mirotin, 2008-2009</title>

		<!-- my styles -->
		<link rel="stylesheet" href="css/storyboard.css" />

		<!-- jQuery and plugins -->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.json.js"></script>
		<script type="text/javascript" src="js/jquery.captify.js"></script>
		<script type="text/javascript" src="js/jquery.ui.js"></script>
		<!--<script type="text/javascript" src="js/jquery.simplemodal.js"></script>-->
		<script type="text/javascript" src="js/jquery.autogrow.js"></script>
		<script type="text/javascript" src="js/jquery.onImagesLoad.js"></script>
		<!--<script type="text/javascript" src="js/jquery.customFileUpload.js"></script>-->	
		<script type="text/javascript" src="js/tiddly.js"></script>
		
		<!-- menu -->
		<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />	
		<!--[if lte IE 7]>
		<style type="text/css">
			html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
		</style>
		<![endif]-->
		<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
		<!-- Narrative JS library -->
		<script src="js/njs/njs_compile.js" type="text/javascript">// TODO: implement building system with njs pre-compiling</script>
   		<script type="text/javascript">NjsCompiler.load("js/dialogs.njs");NjsCompiler.load("js/menu_actions.njs");</script>
		<!-- menu actions in separate file -->
		<!--<script type="text/javascript" src="js/menu_actions.js"></script>-->

		<!-- main routines - data model and interface integration -->
		<script type="text/javascript" src = "js/drawing.js"></script>
		<script type="text/javascript" src = "js/storyboard_project.js"></script>
		<!-- initialization -->
		<script type="text/javascript">
			// initialize values
			canvas = null;			
			project = null;
			currentMockup = null;
			currentSpot = null;
			
			$(document).ready(function() 
			{
				canvas = new Canvas('canvas'); // once the DOM is constructed, initialize the canvas div
				loadProject(project, canvas); // here - just initialize the surface
				// make some UI inits and tweaks
				$('#mockup-comment').autogrow();				
				$('#spot-title').autogrow();				
				ddsmoothmenu.init({mainmenuid: "menu", contentsource: "markup"});
				$('.hotspot-props').hide();				
			});           
		</script>
	</head>

	<body>
		<div id="menu" class="ddsmoothmenu">
			<ul>
                <li><a href="#">Project</a>
                  <ul>
                      <li><a href="#" onclick="project_build(); return false;" id="project_build">Build</a></li>
                      <li><a href="#" onclick="project_new(); return false;" id="project_new">New</a></li>
                      <li><a href="#" onclick="project_open(); return false;" id="project_open">Open...</a></li>
                      <li><a href="#" onclick="project_save(); return false;" id="project_save">Save</a></li>
                      <li><a href="#" onclick="project_saveAs(); return false;" id="project_saveAs">Save As...</a></li>
                      <li><a href="#" onclick="project_close(canvas); return false;" id="project_close">Close</a></li>
                  </ul>
                </li>
                <li><a href="#">Mockup</a>
                      <ul>
                          <li><a href="#" onclick="mockup_add(); return false;">Add new...</a></li>
                          <li><a href="#" onclick="mockup_delete; return false;">Remove current</a></li>
                          <li><a href="#">Clear hotspots</a></li>
                      </ul>
                </li>
                <li><a href="#">Hotspot</a>
                      <ul>
                          <li><a href="#">Delete</a></li>
                      </ul>
                </li>
			</ul>
			<br style="clear: left" />
		</div>

        <h1>Current project: <span>*Untitled</span></h1><br/>
		<div id="thumbs">
			<div id="mockups-tools"><button>Add mockup...</button></div>
		</div>
		<div id="canvas-wrapper">
            <div id="canvas" style="position: absolute; z-index: 250;"></div>
            <img id="mockup" src="img/empty.gif" alt="" width="400" height="400" />           
        </div>
		<div id="properties-wrapper">
			<form name="properties-form" id="properties-form">
				<table>
					<thead>
						<tr><th colspan="2">Project properties</th></tr>
					</thead>
					<tbody>
						<tr>
							<td class="label"><label for="project-path">Location:</label></td>
							<td>
								<input name="project-path" type="text" value="/home/guard/Dropbox/StoryboardManager/_project" readonly="readonly" />
							</td>
						</tr>
						<tr>
							<td class="label"><label for="project-title">Title:</label></td>
							<td><input name="project-title" type="text" value="Sample project title" /></td>
						</tr>
					</tbody>
					<thead>
						<tr><th colspan="2">Mockup properties</th></tr>
					</thead>
					<tbody>
						<tr>
							<td class="label"><label for="mockup-title">Title:</label></td>
							<td><input name="mockup-title" type="text" value="This is slide 1" /></td>
						</tr>
						<tr>
							<td class="label"><label for="mockup-tag">Tag:</label></td>
							<td><input name="mockup-tag" type="text" value="mo1" /></td>
						</tr>
						<tr>
							<td class="label"><label for="mockup-img">Image:</label></td>
							<td>
								<div id="mockup-img-wrapper">
									<input name="mockup-img" type="text" value="/home/guard/Dropbox/StoryboardManager/_project/img/mo1.png" readonly="readonly" />
									<input type="button" id="mockup-file-chooser" value="Browse..." />
								</div>
							</td>
						</tr>
						<tr>
							<td class="label"><label for="mockup-comment">Comments:</label></td>
							<td><textarea name="mockup-comment" id="mockup-comment">Some mockup comment</textarea></td>
						</tr>
						<tr>
							<td class="label"><label>Hotspots number:</label></td>
							<td><span name="mockup-hotspots">2 [<a href="#" onclick="mockup_clear(); return false;">remove all</a>]</span></td>
						</tr>
					</tbody>
					<thead class="hotspot-props">
						<tr><th colspan="2">Hotspot properties</th></tr>
					</thead>
					<tbody class="hotspot-props">
						<tr>
							<td class="label"><label>Id:</label></td>
							<td><span name="spot-id" id="spot-id">rect1</span></td>
						</tr>
						<tr>
							<td class="label"><label for="spot-title">Title:</label></td>
							<td><textarea name="spot-title" id="spot-title">Goto 2</textarea></td>
						</tr>
						<tr>
							<td class="label"><label for="spot-link" id="spot-link">Links to:</label></td>
							<td>
								<select name="spot-link" value="mo1">
									<option value="mo1.png">mo1</option>
									<option value="mo2.png">mo2</option>
								</select>
							</td>
						</tr>
						<tr>
							<td class="label"><label>Left:</label></td>
							<td><span name="spot-left" id="spot-left">40</span></td>
						</tr>
						<tr>
							<td class="label"><label>Top:</label></td>
							<td><span name="spot-top" id="spot-top">200</span></td>
						</tr>
						<tr>
							<td class="label"><label>Width:</label></td>
							<td><span name="spot-width" id="spot-width">200</span></td>
						</tr>
						<tr>
							<td class="label"><label>Height:</label></td>
							<td><span name="spot-height" id="spot-height">100</span></td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		
	</body>
</html>